<template>
  <div class="container">
    <div class="mt-lg-5">
      <v-row class="mb-2">
        <van-empty class="mx-auto" v-if="ticketList.length === 0" description="Empty" />
        <v-col
          v-for="item in ticketList"
          :key="item.ticketNo"
           sm="12" md="6" lg="4" cols="12">
          <v-card class="mx-auto">
              <v-card-title class="white--text grey darken-1 text-body-1 py-3 font-weight-bold">
                 Netflix
                 <v-spacer></v-spacer>
                 <div>
                   <v-btn outlined rounded small class="white--text"
                   @click="handleShowBuy(item)">Renew now</v-btn>
                 </div>
              </v-card-title>
              <v-alert dense rounded="0" text color="grey lighten-1 mb-0">
                <van-count-down class="red--text"
                  :time="item.remainingTime" format="DD d HH h mm m ss s">
                  <template #default="timeData">Remaining subscription duration:
                    <span class="block">{{ timeData.days }}</span>d
                    <span class="block">{{ timeData.hours }}</span>h
                    <span class="block">{{ timeData.minutes }}</span>m
                    <span class="block">{{ timeData.seconds }}</span>s
                  </template>
                </van-count-down>
                <!-- <div  class="red--text"
                style="font-size: 14px; cursor: pointer; text-decoration: underline;">
                  <label style="cursor: pointer;">每次推荐 </label>
                  <span style="font-weight: 800;">+30天 !</span>
                  <img class="ml-1" height="14" src="">
                  </div> -->
              </v-alert>
              <v-card-text class="py-0 pl-0 pr-0">
                <van-cell title="Start time" :value="item.boardingTime" />
                <van-cell title="End time" :value="item.offTime"/>
              </v-card-text>
              <div class="mx-4" style="border-bottom: 1px solid rgba(235, 237, 240, 0.6);"></div>
              <div class="overflow-y-auto">
                <van-cell title="Account" :value="item.carName"/>
                 <!-- label="Last changed 5 Days ago"  -->
                <van-cell title="Password" class="password">
                  <v-btn outlined rounded small color="success" class="mr-1"
                   @click="handleShowPwd(item)">SHOW</v-btn>
                  <!-- <v-btn outlined rounded small color="error"
                   @click="handleRestPassword">RESET</v-btn> -->
                </van-cell>
                <div class="dispute-content-wrapper"
                  style="border-bottom: 1px solid rgb(251, 140, 0);">
                  <div class="dispute-content">
                    <span v-if="item.ticketType===0">
                      Tips: The account you subscribe to is a sharing account,
                      and you need to follow some rules.<br>
                      1. Use your own profile according to the number.<br>
                      2. Don't change the password! Once you change the password privately,
                      other sharers will not be able to log in. Please understand.<br>
                      3. Don't edit/delete other profiles.
                    </span>
                     <span v-if="item.ticketType===1">
                     Tips:The account you subscribe to is a private account.<br>
                      1. Please don't change your password at will,
                      because we need to log in your account regularly to renew your account.
                      Thank you for your understanding!<br>
                      2. Please don't worry, we will never invade your privacy.<br>
                      3. If you have any problem, please contact us in time,
                      we guarantee after-sales service.
                    </span>
                  </div>
                </div>
                <van-cell v-if="item.ticketType===0" title="Profile Num" class="pronum">
                  Please use No.
                  <van-tag class="mx-2" size="large" type="danger">
                    {{item.seatNo}}
                  </van-tag>
                  profile
                </van-cell>
              </div>
              <v-divider></v-divider>
              <van-grid
                :border="false"
                :column-num="5"
                :class="item.ticketType===1?'flex-center':''">
                <template v-if="item.ticketType===0">
                  <van-grid-item v-for="ticket in item.carSeatInfoList" :key="ticket.seatNo">
                    <van-badge :content="ticket.seatNo">
                      <p class="tic-tit nowrap">
                        {{ticket.userName || vusalName[ticket.seatNo - 1]}}
                      </p>
                      <!-- <v-img width="50" height="50" class="img" :src="imgSrc"/> -->
                    </van-badge>
                  </van-grid-item>
                </template>
                <template v-if="item.ticketType===1">
                  <van-grid-item>
                    <van-badge content="1">
                      <p class="tic-tit nowrap">
                        {{item.carSeatInfoList[0].userName}}
                      </p>
                      <!-- <v-img width="50" height="50" class="img" :src="imgSrc"/> -->
                    </van-badge>
                  </van-grid-item>
                </template>
              </van-grid>
              <v-card-actions class="py-0 px-0 d-flex">
                <div class="btn-groups">
                  <v-btn block large tile
                    target="_blank"
                    @click="handleShowBuy(item)">
                    <van-icon name="checked" size="20" color="rgb(129, 211, 248)" />Renew</v-btn>
                </div>
                <v-divider vertical></v-divider>
                <div class="btn-groups">
                  <v-btn block large tile
                    target="_blank"
                    tag="a"
                    href="#/">
                    <van-icon name="question" size="20" color="rgb(236, 128, 141)" />Help</v-btn>
                </div>
                <v-divider vertical></v-divider>
                <div class="btn-groups">
                  <v-btn block large tile
                    target="_blank"
                    tag="a"
                    href="#/">
                    <van-icon name="question" size="20" color="rgb(128, 128, 255)" />Support</v-btn>
                </div>
              </v-card-actions>
              <!--buy-->
              <buy :visible.sync="showBuy" :sku="currentSku" :params="buyParams"></buy>
          </v-card>
        </v-col>
      </v-row>
    </div>
    <!--password-->
    <van-dialog
      v-model="showpassWord"
      title="Tips"
      confirmButtonText="Show Password"
      @confirm="handleConfirm">
      <div class="van-dialog__message van-dialog__message--has-title">
        <template v-if="current.ticketType===0">
          <p >
            Please use profile No.{{current.seatNo}} Please only use your own profile.
            Don't change and delete another profile.
          </p>
          <img width="100%"
            :src="require(`@/assets/gif/profile${current.seatNo}-last.gif`)" />
        </template>
        <template v-if="current.ticketType===1">
           <p >
            Dear friend, This is your private account,
            If you have any questions, please free to contact us.
          </p>
          <img width="100%"
            :src="require('@/assets/gif/profile12345.gif')" />
        </template>
      </div>
    </van-dialog>
  </div>
</template>

<script>
/* eslint-disable @typescript-eslint/no-var-requires */
import { getUserInfo, getUserOneTicketInfo } from '@/api/user';
import { param2Obj } from '@/utils/help';
import { getToken } from '@/utils/auth';
import { ERROR_OK } from '@/api/config';
import Vue from 'vue';
import {
  CountDown, Cell, CellGroup, Tag, Icon, Dialog, Grid, GridItem, Badge, Empty,
} from 'vant';
import { getPortSkuList } from '@/api/home';
import Buy from '../../components/Buy/index.vue';

Vue.use(CountDown);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Tag);
Vue.use(Icon);
Vue.use(Dialog);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Badge);
Vue.use(Empty);

const IMG = require('@/assets/icon/emptyUser.png');

export default Vue.extend({
  name: 'UserService',
  components: { Buy },
  data() {
    return {
      isRedeemLink: false,
      ticketList: [],
      imgSrc: IMG,
      showpassWord: false,
      current: '',
      vusalName: ['alex', 'manolo', 'galax', 'jone', 'woma'],
      showBuy: false,
      currentSku: {},
      buyParams: {},
    };
  },
  created() {
    const { redeemCode } = param2Obj(window.location.search);
    if (!redeemCode) {
      this.isRedeemLink = false;
    } else {
      this.isRedeemLink = redeemCode;
    }
    this.getData();
  },
  methods: {
    handleShowPwd(item) {
      this.showpassWord = true;
      this.current = item;
    },
    getData() {
      if (this.isRedeemLink) {
        getUserOneTicketInfo({ redeemCode: this.isRedeemLink })
          .then((res) => {
            this.ticketList = res.data || [];
          });
      } else {
        if (!getToken()) {
          this.$router.push({ name: 'Login' });
          return;
        }
        getUserInfo().then((res) => {
          if (res.code === ERROR_OK) {
            this.ticketList = res.data || [];
          }
        });
      }
    },
    handleRestPassword() {
      Dialog.alert({
        title: '温馨提示',
        message: '自动重置密码功能每个用户每天只能使用一次，请确认您是否提前输入了错误的密码.',
        showCancelButton: true,
      }).then(() => {
        // on close
      });
    },
    handleConfirm() {
      this.showpassWord = false;
      const title = this.current.ticketType === 0 ? `Please use No. ${this.current.seatNo} profile`
        : 'Tips';
      Dialog.alert({
        title,
        message: `password: ${this.current.carPassword}`,
        confirmButtonText: 'Confirm',
      }).then(() => {
        // on close
      });
    },
    handleShowBuy(car) {
      const { categoryId, ticketType, ticketNo } = car;
      getPortSkuList({
        categoryId,
        selectableProductType: ticketType,
      }).then((res) => {
        if (res.code === ERROR_OK) {
          this.currentSku = this.formatterGoodSku(res.data);
          this.buyParams = { isRenewalBill: 1, ticketNo };
          this.showBuy = true;
        }
      });
    },
    formatterGoodSku(data) {
      const { monthNumSet, screensSet, skuList } = data;
      const tree = [
        {
          k: 'Purchase months',
          k_id: '1',
          k_s: 'monthNum',
          v: monthNumSet.map((item) => ({
            id: item,
            name: `${item} months`,
          })),
        },
        {
          k: 'Select screen',
          k_id: '1',
          k_s: 'screens',
          v: screensSet.map((item) => ({
            id: item,
            name: `${item} screen`,
          })),
        },
      ];
      const list = skuList.map((item) => {
        const {
          screens, monthNum, originalPrice, id, actualPrice, discount,
        } = item;
        return {
          id,
          screens,
          monthNum,
          price: actualPrice,
          stock_num: 110,
          discount,
          originalPrice,
        };
      });
      return { tree, list };
    },
  },
});
</script>

<style scoped lang="scss">
.van-count-down {
  color: #323233;
  font-size: 14px;
  line-height: 20px;
}
.pronum .van-cell__value {
  color: #333;
}
.btn-groups {
  flex: 1 1 300px;
}
.password {
  .van-cell__title {
    flex: 0 0 110px;
  }
}
.pronum {
  .van-cell__title {
    flex: 0 0 100px;
  }
}
.tic-tit {
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 12px;
  color: #969799;
  margin-bottom: 0;
}
.flex-center {
  justify-content: center;
}
.time-ago {
  position: absolute;
  color: #fff;
  font-size: 10px;
  text-align: center;
  bottom: 0;
  left: 0;
  width: 100%;
  opacity: .6;
}
.dispute-content-wrapper {
  .dispute-content {
    margin: 0 16px 10px;
    font-size: 14px;
    padding: 15px;
    background-color: #f6e8d8;
    color: #fb8c00;
    border-radius: 5px;
    border: 1px solid #fb8c00;
  }

}
</style>
